<template>
<div class="edit-cat">
    <a-form :model="formData" :labelCol="{display:'none'}" @finish="updateCat"  >
        <a-form-item name="catname" hasFeedback>
            <a-input v-model:value="formData.catname" placeholder="栏目名称"></a-input>
        </a-form-item>
        <a-form-item name="description">
            <a-input v-model:value="formData.description" placeholder="栏目说明"></a-input>
        </a-form-item>
        <a-form-item name="parentid">
            <a-select v-model:value="formData.parentid">
                <a-select-option  :value="0" :key="0">顶级栏目</a-select-option>
                <a-select-option v-for="(item,index) in catList"  :value="item.catid" :key="catList[index]['catid']">{{item.catname}}</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item>
            <div id="content"></div>
        </a-form-item>
        <a-form-item class="text-center">
            <a-button html-type="submit">确认提交</a-button>
        </a-form-item>
    </a-form>
</div>
</template>
<style lang="less" scoped>
.edit-cat{
    padding:10px 10px;
}

#content{
    :deep(.w-e-text){
        height: 550px;
    }

}
</style>
<script setup>
import { reactive, toRaw } from "@vue/reactivity";
import { onMounted, watch } from "@vue/runtime-core";
import { message } from "ant-design-vue";
import { useRoute } from "vue-router";
import { catInfo,catTopList } from "@/api/content";
import E from 'wangeditor-antd';
import { useStore } from "vuex";
    message.config({top:'200px',duration:1.2});

    const formData=reactive({
        catname:'',
        parentid:0,
        description:'',
        content:'',
        catid:0,
    });

    const catList=reactive({});//栏目列表

    const route=useRoute();
    const store=useStore();
    let editor;
    const imgsrc=[];

    const initGetData= () =>{
        if(route.params['catid']==undefined || !route.params['catid'])
        {
            //错误关闭
            message.error('参数传递错误');
        }
        else{            
            catInfo({catid:route.params['catid']}).then(
                res=>{                    
                    if(res.data['code']==200){
                        Object.assign(formData,res.data['data']);
                        editor.txt.html(formData.content);
                    }
                    else{
                        message.error(res.data['msg']);
                    }
                },
                err=>{
                    console.log(err);
                }
            );

            catTopList().then(
                res=>{
                    if(res.data['code']==200){
                        Object.assign(catList,res.data['data']);
                    }
                    else{
                        message.error(res.data['msg']);
                    }
                },
                err=>{
                    console.log(err);
                }
            )
        }
    };//获取数据

    

    onMounted(async ()=>{
        
        editor=new E("#content");
        editor.customConfig.uploadImgServer=import.meta.env.VITE_BASE_URL+"/Files/img";
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        editor.customConfig.uploadFileName = 'image';
        editor.customConfig.uploadImgTimeout = 15000;
        editor.customConfig.uploadImgHeaders = {'access-token':store.getters['auth/tokken']};
        editor.customConfig.onchange=function (newHtml) {                
                formData.content=newHtml;
            };
        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                    
                    if(result['code']==200)
                    {
                        let url=result['data'];
                        insertImg(url);
                        imgsrc.push(url);
                    }
                    else if(result['code']==0)
                    {
                        message.error(result['msg']);
                    }
                },
                timeout: function (xhr, editor) {
                    //console.log(xhr);                    
                    message.error('上传超时');
                },
                error: function (xhr, editor) {
                   // console.log(xhr);
                    
                }
        }

        editor.create();
        initGetData();
    });

    const checkCatname=async (_rules,value) =>{
        if(!value)
        {
            return Promise.reject('不能为空');
        }
        return Promise.resolve();
    };

    const emit=defineEmits(['resetData']);


    const updateCat= () =>{
        let obj={...toRaw(formData),imgs:imgsrc};
        catInfo(obj).then(
            res=>{
                
                if(res.data['code']==200){
                    message.success('修改成功');
                    emit('resetData');
                }
                else{
                    message.error(res.data['msg']);
                    emit('resetData');
                }
            },
            err=>{
                console.log(err);
            }
        )
    };
    
    watch(
        ()=>route.params,
        ()=>{
            initGetData();
        }
    );

    
</script>
